<template>
  <view class="page container">
    <u-swiper :list="[goods_info.image || '']" :radius="0" height="750rpx"></u-swiper>
    <view class="pad-32 bgc-fff">
      <view class="flex-between-center mb-20">
        <view class="flex-column-center">
          <text class="fs-44 fw-500 c-ff0000">¥{{ goods_info.price || 0 }}</text>
          <text class="fs-28 c-677585 ml-8">起</text>
        </view>
        <!-- 收藏 -->
        <view class="flex-column-center" @click="changeCollect">
          <block>
            <u-icon name="heart" color="#677585" size="40rpx" v-if="!is_collect"></u-icon>
            <u-icon name="heart-fill" color="#ff0000" size="40rpx" v-else></u-icon>
          </block>
          <text class="fs-28 ml-11 fw-500">收藏</text>
        </view>
      </view>
      <u-text :text="goods_info.title" :lines="2" size="36rpx" color="#0C1028" bold></u-text>
    </view>
    <view class="pad-32 bgc-fff mt-28">
      <view class="flex-column-center mb-28">
        <view class="w-6 h-34 bgc-c5261d" style="border-radius: 40rpx"></view>
        <view class="fs-32 fw-500 ml-14">基础信息</view>
      </view>
      <view class="flex ml-20 mb-20 fs-28">
        <view style="flex: 1"><text class="c-677585">分 　 类：</text> <text>{{ goods_info.cate_name || '' }}</text>
        </view>
        <view style="flex: 1"><text class="c-677585">品 　 牌：</text> <text>{{ goods_info.brand_name || '' }}</text></view>
      </view>
      <view class="flex ml-20 mb-20 fs-28">
        <view style="flex: 1"><text class="c-677585">净 含 量：</text> <text>{{ goods_info.volume || '' }}ml</text></view>
        <view style="flex: 1"><text class="c-677585">酒 精 度：</text> <text>{{ goods_info.alcohol || '' }}度</text></view>
      </view>
      <view class="flex ml-20 mb-20 fs-28">
        <view style="flex: 1"><text class="c-677585">香 　 型： </text> <text>{{ goods_info.aroma_name || '' }}</text>
        </view>
        <view style="flex: 1"><text class="c-677585">包装形式：</text> <text>{{ goods_info.pack_name || '' }}</text>
        </view>
      </view>
    </view>
    <view class="pad-32 bgc-fff mt-28">
      <view class="flex-column-center mb-28">
        <view class="w-6 h-34 bgc-c5261d" style="border-radius: 40rpx"></view>
        <view class="fs-32 fw-500 ml-14">产品规格</view>
      </view>
      <view class="bgc-f7f8fa br-12 pad-20 flex mb-26" v-for="(item, index) in sku_list" :key="index">
        <view class="w-132">
          <u-image width="132rpx" height="132rpx" radius="12rpx" :src="item.image"></u-image>
        </view>
        <view class="flex-column ml-24">
          <text class="fs-32 fw-500 mb-26">{{ item.title }}</text>
          <text class="fs-36 c-ff0000 fw-600">¥{{ item.price }}</text>
        </view>
      </view>
    </view>
    <view class="pad-32 bgc-fff mt-28">
      <view class="flex-column-center mb-28">
        <view class="w-6 h-34 bgc-c5261d" style="border-radius: 40rpx"></view>
        <view class="fs-32 fw-500 ml-14">商品详情</view>
      </view>
      <u-parse :content="goods_info.content"></u-parse>
    </view>
    <view class="bottom-box bgc-fff">
      <view class="mt-20">
        <text class="fs-28">联系人：</text>
        <text class="fw-500 fs-36">{{ shop_info.contact_name || "" }}</text>
      </view>
      <u-button :customStyle="btnStyle" @click="$utils.onCall(shop_info.contact_phone || '')">联系TA</u-button>
    </view>
  </view>
</template>
<script>
import GoodsCard from "@/components/rowCards/GoodsCard";
import NewsCard from "@/components/rowCards/NewsCard";
import { productDetailApi, goods_collectApi } from "@/services/home";
export default {
  data() {
    return {
      btnStyle: {
        border: "none",
        backgroundColor: "#C5261D",
        color: "#fff",
        width: "312rpx",
        height: "88rpx",
        opacity: 1,
        borderRadius: "10rpx",
        background: "#AE2C2C",
      },
      swiperList: ["https://uviewui.com/swiper/swiper1.png"],
      goods_id: '',
      goods_info: {},
      sku_list: [],
      is_collect: 0,
      shop_info: {},
    };
  },
  components: { GoodsCard, NewsCard },
  onLoad(options) {
    this.goods_id = options.id;
    this.getProductDetail();
  },
  methods: {
    async changeCollect() {
      await goods_collectApi({
        goods_id: this.goods_id,
      });
      this.is_collect = this.is_collect == 1 ? 0 : 1;
    },
    getProductDetail() {
      productDetailApi({ id: this.goods_id }).then((res) => {
        this.is_collect = res.data?.is_collect || 0;
        this.goods_info = res.data?.goods_info || {};
        this.sku_list = res.data?.sku_list || [];
        this.shop_info = res.data?.shop_info || {};
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  padding-bottom: 200rpx;
  background-color: #f7f8fa;
}

.tabs {
  display: flex;
  flex-wrap: wrap;

  .tab-item {
    min-width: 96rpx;
    height: 48rpx;
    background-color: #f7f8fa;
    border-radius: 8rpx;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 22rpx;
    margin-bottom: 22rpx;

    &-active {
      background-color: rgba(197, 38, 29, 0.1);
      color: #fff;
    }
  }
}

.bottom-box {
  padding: 24rpx 32rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}
</style>